<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>墨芽豆登录</title>
    <link rel="stylesheet" href="../css/api.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>
    <div class="c" id="app" v-cloak>
        <div class="nav_b">
            <div class="nav">
                <div>
                    <img src="../image/logo.png" alt="" class="logo"> <span class="pc">PC课程端</span>
                </div>
                <div class="login-sw" @click="loginSwitch">
                    {{loginTitle}}
                </div>
            </div>
        </div>
        <div class="content">
            <div class="loginbox">
                <div class="left">
                    <img src="../image/longinbg.png" alt="">
                </div>
                <div class="right">
                    <div class="title">{{loginName}}</div>
                    <div class="tabbar">
                        <span :class="{active:tabIndex == index}" @click="fnLoginTab(index)"
                            v-for="(item,index) in loginTab">{{item}}</span>
                    </div>

                    <div class="inputbox" v-if='loginFlag'>
                        <div>
                            <label @click="getcode">{{areaCode}}
                                <img src="../image/dowm.png" alt="" class="down">
                            </label>
                            <input type="text" placeholder="请输入手机号" v-model='mobile'>
                        </div>
                        <div>
                            <input type="password" placeholder="请输入密码" v-model="password">
                        </div>
                    </div>
                    <div class="inputbox" v-else>
                        <div>
                            <label @click="getcode">{{areaCode}}
                                <img src="../image/dowm.png" alt="" class="down">
                            </label>
                            <input type="text" placeholder="请输入手机号" v-model='mobile'>
                        </div>
                        <div>
                            <input type="text" placeholder="请输入验证码" v-model="code">
                            <span class="code" @click="fnGetCode" v-if="codeFlag">发送验证码</span>
                            <span class="code_act code" v-else>重新获取{{count}}s</span>
                        </div>
                    </div>
                    <button class="btn" @click="loginBtn()">登录</button>
                    <div class="codeBox" v-if="areaCodeFlag">
                        <div class="list">
                            <h2>Z</h2>
                            <p class="border-bottom" @click="fnCheckAreaCode('+86')">中国 <span>+86</span></p>
                            <p class="border-bottom" @click="fnCheckAreaCode('+852')">中国香港<span>+852</span></p>
                            <p class="border-bottom" @click="fnCheckAreaCode('+853')">中国澳门<span>+853</span></p>
                            <p class="border-bottom" @click="fnCheckAreaCode('+886')">中国台湾<span>+886</span></p>
                        </div>
                        <div class="list" v-for="(value,key) in areaCodeList">
                            <h2>{{key}}</h2>
                            <p class="border-bottom" v-for="item in value" @click="fnCheckAreaCode(item.no)">
                                {{item.name}}
                                <span>{{item.no}}</span></p>
                        </div>
                    </div>
                    <p class="Copyright">Copyright2019 ICPI 备 14013400 号-1 京 ICP 证 150920 号电子营业执照京公网安备 11010502031234
                        首都网警人力资源服务许可证</p>
                </div>
            </div>
            <div class="tip_alert" v-if='alertFlag'>
                <div>{{text}}</div>
            </div>
        </div>
    </div>
</body>

<script src="../js/base.js"></script>
<script src="../libs/thirdpart/vue.js"></script>
<script src="./../js/axios.js"></script>
<script src="./../js/areaCode.js"></script>
<script src="../js/base.js"></script>
<script>
    axios.defaults.baseURL = baseURL;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    var vm = new Vue({
        el: '#app',
        data: {
            count: 60,
            loginFlag: true,
            codeFlag: true,
            mobile: '',
            code: '',
            t: new Date(),
            loading: false,
            alertFlag: false,
            text: '',
            loginTab: ['密码登录', '验证码登录'],
            tabIndex: 0,
            password: '',
            areaCode: '+86',
            areaCodeList: areaCode,
            areaCodeFlag: false,
            loginTitle: '老师登录',
            loginSwitchFlag: 1,
            loginName: '学生上课',
            client: 'pad',
            loginUrl: './../index_stu.html'
        },
        created: function () {
            // this.fnAbc()
        },
        methods: {
            //切换登录
            loginSwitch: function () {
                var loginSwitchFlag = this.loginSwitchFlag;
                var loginTitle = this.loginTitle;
                var loginName = this.loginName;
                loginSwitchFlag = loginSwitchFlag == 1 ? 2 : 1;
                loginTitle = loginSwitchFlag == 1 ? '老师登录' : '学生登录';
                loginName = loginSwitchFlag == 1 ? '学生上课' : '老师上课';
                client = loginSwitchFlag == 1 ? 'pad' : 'pc';
                loginUrl = loginSwitchFlag == 1 ? './../index_stu.html' : './../index.html';
                this.loginSwitchFlag = loginSwitchFlag;
                this.loginTitle = loginTitle;
                this.loginName = loginName;
                this.loginUrl = loginUrl;
                this.client = client;
            },
            fnCheckAreaCode: function (code) {
                this.areaCode = code;
                this.areaCodeFlag = false
            },
            getcode: function () {
                this.areaCodeFlag = true
            },
            fnLoginTab: function (index) {
                this.tabIndex = index;
                if (index == 0) {
                    this.loginFlag = true
                } else {
                    this.loginFlag = false
                }
            },
            fnGetCode: function () {
                var _this = this;
                if (this.areaCode == '+86') {
                    if (!this.isPhoneNum(this.mobile)) {
                        //@param    提示文本
                        this.ToastOpen('请输入正确的手机号')
                        return
                    }
                    var mobile = this.mobile;
                } else {
                    var areaCode = this.areaCode.substr(1);
                    var mobile = '00' + areaCode + this.mobile;
                }
                this.codeFlag = false;
                var timer = setInterval(function () {
                    if (_this.count > 0) {
                        _this.count--;
                    } else {
                        clearInterval(timer);
                        _this.codeFlag = true;
                        _this.count = 60;
                    }
                }, 1000);
                this.loading = true;
                axios.get('/api/sms/code?mobile=' + mobile + '&type=login')
                    .then((response) => {
                        if (response.data.code == 10200) {
                            this.ToastOpen(response.data.msg)
                        } else {
                            this.ToastOpen('response.data.msg')
                        }
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            isPhoneNum: function (params) {
                return /^1[123456789]\d{9}$/.test(params)
            },
            //登录按钮
            loginBtn: function () {
                var _this = this;
                var mobile = this.isPhoneNum(this.mobile);
                if (this.areaCode == '+86') {
                    if (!mobile) {
                        this.ToastOpen('请输入正确的手机号')
                        return
                    }
                }
                if (this.loginFlag) {
                    if (!this.password) {
                        //@param    提示文本
                        this.ToastOpen('请输入密码')
                        return
                    }
                    let data = {
                        mobile: this.mobile,
                        password: this.password,
                        client: this.client,
                        area: this.areaCode
                    }
                    console.log(data)
                    //密码登录
                    axios.post('/api/auth/login', data)
                        .then((response) => {
                            console.log(response);
                            if (response.data.code == 10200) {
                                this.ToastOpen('登录成功');
                                window.localStorage.token = response.data.token;
                                setTimeout(() => {
                                    window.location.href = this.loginUrl
                                }, 500);
                            } else {
                                this.ToastOpen(response.data.msg)
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                } else {
                    if (!this.code) {
                        //@param    提示文本
                        this.ToastOpen('请输入验证码')
                        return
                    }
                    axios.post('/api/auth/login/mobile', {
                        mobile: this.mobile,
                        code: this.code,
                        type: 'login',
                        area: this.areaCode,
                        client: this.client
                    })
                        .then((response) => {
                            console.log(response)
                            if (response.data.code == 10200) {
                                this.ToastOpen('登录成功')
                                window.sessionStorage.token = response.data.token;
                                setTimeout(() => {
                                    window.location.href = this.loginUrl
                                }, 500);
                            } else {
                                this.ToastOpen(response.data.msg)
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                }
            },
            ToastOpen: function (text) {
                this.alertFlag = !this.alertFlag;
                this.text = text;
                setTimeout(() => {
                    this.alertFlag = !this.alertFlag;
                }, 2000)
            }
        }
    })

    function login() {
        window.location.href = './index.html'
    }
</script>

</html>